<template>
  <u-popup :show="visible" round="8" mode="center" @close="closeBatch" :safeAreaInsetBottom="false">
    <view class="batch-edit form-ret-padd">
      <view class="title text-center">批量修改</view>
      <u--form
        :model="batchForm"
        :rules="rules"
        ref="form1"
        labelWidth="120rpx"
      >
        <u-form-item prop="price" label="价格/元">
          <view class="show-count">
            <u--input
              v-model="batchForm.price"
              maxlength="10"
              placeholder="请输入售卖价格"
            />
            <view class="num">{{ String(batchForm.price).length || 0 }}/10</view>
          </view>
        </u-form-item>
        <u-form-item prop="inventory" label="库存">
          <view class="show-count">
            <u--input
              v-model="batchForm.inventory"
              maxlength="10"
              placeholder="请输入售卖库存"
            />
            <view class="num">{{ String(batchForm.inventory).length || 0 }}/10</view>
          </view>
        </u-form-item>
        <u-form-item prop="isopen" label="上下架">
          <u-switch
            v-model="batchForm.isopen"
            :activeValue="1"
            :inactiveValue="0"
            @change="changeDialog"
          />
        </u-form-item>
      </u--form>
    </view>
    <view class="flex flex-btw btns" :style="{ '--theme': themeColor }">
      <view @click="closeBatch()" class="flex1 center">取消</view>
      <view @click="submitBatch()" class="flex1 center save">保存</view>
    </view>
  </u-popup>
</template>
<script>
export default {
  data() {
    return {
      rules: {
        price: [
          {
            type: "number",
            required: true,
            message: "请输入售卖价格",
            trigger: ["blur", "change"],
          },
        ],
        inventory: [
          {
            type: "number",
            required: true,
            message: "请输入售卖库存",
            trigger: ["blur", "change"],
          },
        ],
      },
      batchForm: {
        price: 0.01,
        inventory: 0,
        isOpen: 0,
      },
    };
  },
  props: ["visible"],
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
  },
  methods: {
    changeDialog(value) {
      this.batchForm.isOpen = value;
    },
    closeBatch() {
      this.batchForm = {
        price: 0.01,
        inventory: 0,
        isOpen: 1,
      };
      this.$emit("update:visible", false);
    },
    submitBatch() {
      this.$refs.form1.validate().then((res) => {
        let { batchForm } = this;
        this.$emit("submitBatch", batchForm);
        this.closeBatch();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.batch-edit {
  width: calc(100vw - 250rpx);
  padding: 40rpx 45rpx 25rpx;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #131313;
    margin-bottom: 25rpx;
  }
}
.btns {
  border-radius: 0rpx 0 12rpx  12rpx ;
  overflow: hidden;
  view {
    height: 80rpx;
    color: var(--theme);
    border-top: 1px solid #eee;
  }
  .save {
    background-color: var(--theme);
    color: #fff !important;
    border-color: var(--theme) !important;
  }
}
</style>
